<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<body>
		<form>
			<fieldset>
				<legend>注册信息</legend>
				<table border="1">
					<tr>
						<td>姓名</td>
						<td>
							<input type="text" name="username" />
						</td>
					</tr>
					<tr>
						<td>性别</td>
						<td>
							<input type="radio" name="gender" value="1" checked="checked" />男
							<input type="radio" name="gender" value="0" />女
						</td>
					</tr>
					<tr>
						<td>出生日期</td>
						<td>
							<input type="date" name="birthday" />
						</td>
					</tr>
					<tr>
						<td>技术专长</td>
						<td>
							<input type="checkbox" name="major" value=".NET" />.NET
							<input type="checkbox" name="major" value="Java" />Java
							<input type="checkbox" name="major" value="C++" />C++
							<input type="checkbox" name="major" value="C" />C
							<input type="checkbox" name="major" value="PHP" />PHP
						</td>
					</tr>
					<tr>
						<td>意向工作地点</td>
						<td>
							<select name="region">
								<option>北京</option>
								<option>上海</option>
								<option>广州</option>
								<option>西安</option>
								<option>成都</option>
							</select>
						</td>
					</tr>
					<tr>
						<td>自我介绍</td>
						<td>
							<textarea rows="5" cols="60" name="intro"></textarea>
						</td>
					</tr>
					<tr>
						<td colspan="2" style="text-align:center">
							<input type="button" value="以GET方式提交" onclick="submitGet()"/>
							<input type="button" value="以POST方式提交" onclick="submitPost()" />
							<input type="button" value="以JSON格式提交" onclick="submitJson()" />
						</td>
					</tr>
				</table>
			</fieldset>
		</form>
		<script>
			var form = document.forms[0];
			function submitGet(){
				form.method = "get";
				form.action = "service.php";		// 虚拟一个服务器提交页面
				form.submit();
			}
			function submitPost(){
				// 使用浏览器开发工具的"网络"功能查看提交到服务器的数据
				form.method = "post";
				form.action = "service.php";		
				form.submit();
			}
			function submitJson(){
				var majors = form.elements["major"];
				var skills = [];
				for(var i=0;i<majors.length;i++){
					if(majors[i].checked){
						skills.push(majors[i].value);
					}
				}
				var region = form.elements["region"].options[
					form.elements["region"].selectedIndex].text;
					
				var data = {
					"username" : form.elements["username"].value,
					"gender" : form.elements["gender"].value,
					"birthday" : form.elements["birthday"].value,
					"skills" : skills.join(","),
					"region" : region,
					"intro" : form.elements["intro"].value
				};
				alert(JSON.stringify(data));
			}
		</script>
	</body>

</html>